// JavaScript Document
//html5小游戏相关的呈现
//一个game相当于一个游戏地图里面的所有的信息
KuoqiAppjs.define('Kuoqi.app.game',{
	version:'base',
	extends:'Kuoqi.app',
	
	//拥有自己的一些属性，并不完全适配app
	__toModule:function(){
		//基础的还是要有的，有没有其实都无所谓
		this.top.library.pages[this.route] = this;	
	},
	zIndex:1,//
	width:0,//当前画布的宽度
	height:0,//当前画布的高度
	timernum:0,//帧率计数
	FPs:30,//运行帧率
	map:[],//地图相关信息
	childs:[],//元素盒子列表
	config:{},
	//基础的盒子元素
	boxElement:null,
	//元素信息
	element:document.createElement("canvas"),
	
	//本元素的画布
	canvas:null,
	
	//初始化方法
	init:function(callback){callback();},
	
	//展示方法
	show:function(){
		//重新创建canvas画布信息
		this.width = 1080;
		this.height = 1920;
		//然后启动定时器世界
		this.start();//进行开始
	},
	
	//增加元素列表，当然这些所谓的元素都是在这个列表中的部分
	append:function(kele){
		//判定自己是否拥有数据自己的childs,如果没有则自己创建一个属于自己的孩子列表
		if(!Object.prototype.hasOwnProperty.call(this,'childs')){
			this.childs = [];	
		}
		var ths = this;
		kele.game = this;
		if(kele.hasInit){
			
			this.childs.push(kele);
			//将元素的信息，渲染到画布上面
			kele.flushIn(this);
		}else{
			kele.init(function(){
				ths.childs.push(kele);
				//将元素的信息，渲染到画布上面
				kele.flushIn(this);	
			});	
		}
		
	},
	
	//游戏开始运行
	start:function(){
		this.create();
		this.run();	
	},
	
	//游戏常规运行
	run:function(){
		var ths = this;
		this.nextFrame();
		this.timernum = setTimeout(function(){
			ths.run();
		},1 / this.FPs * 1000)
	},
	
	//进入下一帧
	nextFrame:function(){
		//todo--当执行一些动画效果的时候，会用到这个，会根据计算，然后得出下一帧的样子	
		//子方法使用同样的函数进入到下一帧的计算中
		//console.log(this);
		//将所有的孩子都写到这里面
		//重置所有的内容区域
		if(this.canvas){
			this.canvas.clearRect(0,0,this.width,this.height);
		}
		
		this.childs.forEach(function(child){
			child.nextFrame();
		});
	},
	
	//因为一些常用元素变更导致的重建
	sync:function(){
		this.review();
	},
	
	//创建基础的画布信息
	create:function(){
		this.element.width = this.width;
		this.element.height = this.height;
		if(this.top.boxElement){
			$Q(this.element).css({
				'position': 'fixed',
				'left': '0',
				'top': '0',
				'right': '0',
				'bottom': '0',	
			});
			this.top.boxElement.appendChild(this.element);
		}
		this.canvas = this.element.getContext("2d");
	},
});
